<template>
    <div>
        <search-form
                size="mini"
                v-show="dialogResourceSearchFormItems instanceof Array && dialogResourceSearchFormItems.length>0"
                :searchData="dialogResourceSearchParams"
                :searchForm="dialogResourceSearchFormItems"
                @search="searchBtnClickHandle"
        ></search-form>
        <Table
                :height="tableHeight"
                :class="checkMode==='single'?'single-table':''"
                ref="d2Crud"
                :columns="dialogResourceColumns"
                :data="dataTable"
                :loading="pageStatus.listLoading"
                :pagination="pagination"
                @pagination-current-change="currentPageChangeHandle"
                @on-selection-change="selectionChangedHandle"
        >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
            <Page class="left" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                  @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                  show-elevator/>
            </Col>
        </Row>
    </div>
</template>

<script>

    //import pageCommonFunction from '@/components/pageCommonFunction.js'
    import pageCommonFunction from './pageCommonFunction.js'
    import SearchForm from './SearchForm.vue'

    export default {

        props: {
            dialogResourceSelectedDataArr: {type: Array, default: () => []},
            dialogResourceSearchParams: {
                type: Object, default: () => {
                }
            },
            dialogResourceSearchFormItems: {type: Array, default: () => []},
            dialogResourceQueryUrl: {type: String, default: ''},
            dialogResourceColumns: {type: Array, default: () => []},
            checkMode: {type: String, default: 'multiple'},
            dialogResourceTableDataKey: {type: String, default: 'id'},
        },
        data() {
            return {
                ...this.createCommonDataField(),
                dataToQuery: {...this.dialogResourceSearchParams},
                selectedDataArr: [...this.dialogResourceSelectedDataArr],
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                // 页面显示参数
                tableHeight: 0
            }
        },
        watch: {
            dataTable(newVal) {
                setTimeout(() => {
                    this.setRowChecked()
                }, 100)
            }
        },
        computed: {},
        async mounted() {
            this.tableHeight = window.innerHeight - this.$refs.d2Crud.$el.offsetTop - 255;
            this.queryUrl = this.dialogResourceQueryUrl
            await this.queryAjax()

        },
        created() {
        },
        methods: {
            ...pageCommonFunction,
            submitBtnClickHandle() {
                this.$emit('selectSubmit', this.selectedDataArr)
            },
            async searchBtnClickHandle(data) {
                this.dataToQuery = {...this.dialogResourceSearchParams, ...data};
                await this.queryAjax();
            },
            getSelectedDataArr() {
                return this.selectedDataArr
            },
            async currentPageChangeHandle(currentPage) {
                await this.paginationCurrentChange(currentPage)
            },
            selectionChangedHandle(selection) {
                if (this.pageStatus.listLoading) return
                if (this.checkMode === 'single') {
                    var allSelectedGuidArr = getGuidArr(this.selectedDataArr)

                    var arr = []
                    selection.map(item => {
                        if (allSelectedGuidArr.indexOf(item[this.dialogResourceTableDataKey]) === -1) {
                            arr.push({
                                ...item,
                                childGuid: item[this.dialogResourceTableDataKey]
                            })
                        }
                    })
                    this.selectedDataArr = arr
                    this.setRowChecked()
                } else {
                    var allGuidArr = getGuidArr(this.dataTable, this.dialogResourceTableDataKey),
                        selectedGuidArr = getGuidArr(selection, this.dialogResourceTableDataKey),
                        unselectedGuidArr = allGuidArr.filter(value => (selectedGuidArr.indexOf(value) === -1))
                    // console.log(allGuidArr)
                    // console.log(selectedGuidArr)
                    // console.log(unselectedGuidArr)
                    // console.log('删除要删除的'+unselectedGuidArr.length+'：'+unselectedGuidArr)
                    // 删除要删除的
                    var selectedDataArr = this.selectedDataArr.filter(value => {
                        console.log(value.childGuid + ' - ' + (allGuidArr.indexOf(value.childGuid) === -1) + ' - ' + (unselectedGuidArr.indexOf(value.childGuid) === -1))
                        return ((allGuidArr.indexOf(value.childGuid) === -1) || (unselectedGuidArr.indexOf(value.childGuid) === -1))
                    })
                    // console.log('删除后')
                    // console.log(selectedDataArr)
                    // 要添加的
                    var selectedDataGuidArr = getGuidArr(selectedDataArr, 'childGuid')
                    for (var i = 0, il = selection.length; i < il; i++) {
                        var obj = selection[i]
                        if (selectedDataGuidArr.indexOf(obj[this.dialogResourceTableDataKey]) === -1) {
                            selectedDataArr.push({
                                ...obj,
                                childGuid: obj[this.dialogResourceTableDataKey],
                            })
                        }
                    }
                    // 合并
                    this.selectedDataArr = selectedDataArr
                }
            },
            // 设置每行选中状态
            setRowChecked() {
                this.pageStatus.listLoading = true
                var d2Crud = this.$refs.d2Crud
                window.d2Crud = d2Crud
                d2Crud.selectAll(false)
                var selectedDataGuidArr = getGuidArr(this.selectedDataArr, 'childGuid')
                var arr = this.dataTable
                for (var i = 0, il = arr.length; i < il; i++) {
                    var obj = arr[i]
                    var isChecked = selectedDataGuidArr.indexOf(obj[this.dialogResourceTableDataKey]) !== -1
                    if (isChecked) {
                        d2Crud.toggleSelect(i)
                    }
                }
                this.pageStatus.listLoading = false
            },
        },
        components: {
            SearchForm
        }
    }

    function getGuidArr(arr, key = 'id') {
        var resArr = []
        for (var i = 0, il = arr.length; i < il; i++) {
            var obj = arr[i]
            resArr.push(obj[key])
        }
        return resArr
    }
</script>
<style scoped>
    /*隐藏全选复选框*/
    /deep/ .single-table .has-gutter > tr > th:nth-child(1) .el-checkbox {
        display: none;
    }
</style>
